<template>
	<view class="pages">
	  <view class="height20"></view>
	  <view class="body">
	    <view class="list-box">
	        <view class="placeholder">期数</view>
	        <view class="placeholder">应还总金额</view>
	        <view class="placeholder">账单到期日</view>
	    </view>
	    <block v-for="(item,index) in listBill" :key="index">
	      <view class="list-box">
	          <view v-if="item.term.length <= 1" class="placeholder">第0{{item.term}}期</view>
	          <view v-else class="placeholder">第{{item.term}}期</view>
	          <view class="placeholder ft_red">{{(item.totalAmt * 1).toFixed(2)}}元</view>
	          <view class="placeholder">{{item.dueDate}}</view>
	      </view>
	    </block>
	  </view>
	  <view class="height20"></view>
	  <view class="height40"></view>
	  <view class="btnBox">
	    <button size="default" class="btn" type="primary" onTap="navigateBack">返回</button>
	  </view>
	  <view class="height40"></view>
	</view>
</template>

<script>
	import {
	  getListBillByOrderId,
	} from '@/service/chengyongche'
	export default {
		data() {
			return {
				listBill: ''
			}
		},
		onLoad() {
			const _this = this;
			uni.getStorage({
				key: 'orderDate',
				success: function(res) {
					const orderId = res.data.orderId;
					let userInfoData = uni.getStorageSync('userInfo');
					let header = {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': userInfoData.token
					};
					const prams = {orderId};
					_this._getListBillByOrderId(JSON.stringify(prams), header);
				}
			})
		},
		methods: {
			/**
			 * 返回
			 * @method navigateBack
			 */
			navigateBack() {
				uni.navigateBack()
			},
			_getListBillByOrderId(prams, header) {
				const _this = this;
				uni.showLoading();
				getListBillByOrderId(prams, header).then(res => {
					console.log(res);
					const data = res.data;
					uni.hideLoading();
					if(data.resultCode != "0000") {
						uni.showToast({
							icon: 'none',
							title: res.data.resultMsg,
							duration: 3000
						});
					}else {
						uni.hideLoading();
						_this.listBill = data.data.listBill;
					}
				})
			},
		}
	}
</script>

<style scoped>
	.pages{
	  background: #eaeaea;
	  padding: 0 28rpx;
	}
	.body {
	  background: #ffffff;
	  border-radius: 10rpx;
	  font-size: 22rpx;
	}
	.placeholder {
	  text-align: center;
	}
	.list-box {
	  border-bottom: 1px solid #eaeaea;
	  height: 68rpx;
	  line-height: 68rpx;
		display: flex;
	}
	
	.list-box .placeholder {
		flex: 1;
	}
</style>
